<template>
	<view class="count">
		<!-- 搜索栏 -->
		<view class="">
			<u-row>
				<u-col span="1">
					<view class="u-text-right">
						<u-icon :name="sex" :color="sex=='man'?'#2979ff':'pink'" size="48" @click="show=true"></u-icon>
					</view>
				</u-col>
				<u-col span="10">
					<view class="">
						<u-search placeholder="许嵩" action-text="搜索" :disabled="true"
							@click="jump('/pages/index/search')"></u-search>
					</view>
				</u-col>
				<!-- 右侧弹出层 -->
				<u-col span="1">
					<view class="u-text-left">
						<u-icon name="list" size="48" @click="show_right=true"></u-icon>
						<u-select v-model="show_right" mode="single-column" :list="links" @confirm="confirm"></u-select>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 左侧弹出层 -->
		<view class="">
			<u-popup v-model="show" mode="left">
				<view class="">
					<view class="u-text-center u-m-20">
						<u-avatar :src="src" mode="circle" :show-sex="true" :show-level="true" :size="180"
							:sex-icon="sex"></u-avatar>
						<view class="u-text-center ">{{name}}</view>
					</view>
					<view class="">
						<u-grid :col="3">
							<u-grid-item>
								<view class="grid">{{authority}}</view>
								<view class="grid-text">动态</view>
							</u-grid-item>
							<u-grid-item>
								<view class="grid">{{follows}}</view>
								<view class="grid-text">关注</view>
							</u-grid-item>
							<u-grid-item>
								<view class="grid">{{followeds}}</view>
								<view class="grid-text">粉丝</view>
							</u-grid-item>
						</u-grid>
					</view>

					<view class="u-m-10 ">
						<view class="u-m-20 personal">
							<view class="top">基本信息</view>
							<!-- <view>村龄：</view> -->
							<view>年龄：{{age}}</view>
							<view>地区：{{address}}</view>
							<view>标签：{{label}}</view>
						</view>
						<u-cell-group>
							<u-cell-item title="等级" :title-width="400" :value="'Lv.'+level" :arrow="false">
							</u-cell-item>
							<u-cell-item title="听歌数量" :arrow="false" :value="listening_to_number_of"></u-cell-item>
						</u-cell-group>
					</view>
				</view>
				<view class="long_btn u-p-20">
					<u-button ripple shape="circle" type="primary" @click="jump('/pages/index/login')">退出登录</u-button>
				</view>
			</u-popup>
		</view>
		<!--轮播图-->
		<view class="shuffl">
			<u-swiper :list="list" :title="true"></u-swiper>
		</view>
		<!-- 推荐歌单 -->
		<view class="">
			<view class="u-m-30 bold">推荐歌单</view>
			<view class="">
				<u-row>
					<u-col span="4" v-for="(item,index) in playlist" :key="index">
						<navigator :url='"/pages/user/playlist?id="+item.id'>
							<view class="u-m-10">
								<view class="tages">
									<u-tag :text="item.playCount" shape="circle" bg-color="rgba(52,52,52,0.3)"
										type="info" color="#FFFFFF"></u-tag>
								</view>
								<u-image width="100%" height="200rpx" :src="item.image"></u-image>
								<view class="u-font-22 u-text-center u-content-color" style="height: 60rpx;">
									{{item.name}}
								</view>
							</view>
						</navigator>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 最新音乐 -->
		<view>
			<view class="u-m-30 bold">最新音乐</view>
			<view class="" v-for="(item, index) in new_song" :key="index">
				<!-- <navigator> -->
					<!-- <u-swipe-action :show="item.show" :index="index"> -->
					<view class="item" @click="show_music(item.id)">
						<image mode="aspectFill" :src="item.image" class="img">
							<view class="">
								<text class="title">{{ item.name }}</text>
								<text class="title_add u-tips-color" v-for="(link,n) in item.alias"
									:key="n">({{link}})</text>
								<view class="u-p-l-20 text_is_beyond">
									<text v-for="(arr,e) in item.singer" :key="e">
										{{arr}}
										<text v-if="item.singer.length-1 != e">\</text>
									</text>
								</view>
							</view>
					</view>
					<!-- </u-swipe-action> -->
				<!-- </navigator> -->
			</view>
		</view>
		<!-- 底部播放 -->
		<play class="play" :id='musicId'></play>
	</view>
</template>

<script>
	import play from '../../components/play_music/play.vue'
	export default {
		components: {
			play
		},
		data() {
			return {
				list: [], //轮播图
				value: '',
				type: 'text',
				border: true,
				show: false, //左侧弹出层
				right_show: false, //右侧弹出层
				src: '@/static/attar.png',
				name: '', //名称
				sex: '', //性别
				age: '', //年龄
				label: '', //介绍
				authority: 0, //动态
				followeds: 0, //粉丝
				follows: 0, //关注
				address: '', //登录地址
				level: 0, //等级
				listening_to_number_of: 0, //听歌数量
				uid: '',
				playlist: [], //推荐歌单
				new_song: [], //新歌
				show_right: false,
				links: [{
						value: '1',
						label: '每日推荐'
					},
					{
						value: '2',
						label: 'MV'
					}],
				musicId:0
			};
		},
		onLoad(option) {

			//个人信息
			this.uid = option.userId;
			// console.log(this.uid);
			uni.request({
				url: 'https://www.codeman.ink/api/user/detail',
				data: { 
					uid:this.uid
				},
				method: 'GET',
				success: (res) => {
					// console.log(res.data);
					//名称
					this.name = res.data.profile.nickname;
					//介绍 - 标签
					this.label = res.data.profile.signature;
					//头像
					this.src = res.data.profile.avatarUrl;
					//性别
					if (res.data.profile.gender == 1) {
						this.sex = 'man';
					} else if (res.data.profile.gender == 2) {
						this.sex = 'woman';
					} else {
						this.sex = '';
					}
					//动态
					this.authority = res.data.profile.authority;
					//关注
					this.follows = res.data.profile.follows;
					//粉丝
					this.followeds = res.data.profile.followeds;
					//出生日期
					var year1 = new Date(res.data.profile.birthday).getYear();
					var year2 = new Date().getYear();
					this.age = year2 - year1;
					//等级
					this.level = res.data.level;
					//听歌数量
					this.listening_to_number_of = res.data.listenSongs;
				}
			});
			//登录地址
			let that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					uni.request({
						url: "http://api.map.baidu.com/geocoder",
						data: {
							location: `${res.latitude},${res.longitude}`,
							output: 'json'
						},
						method: 'GET',
						success: (res) => {
							that.address = res.data.result.addressComponent.province + res.data
								.result.addressComponent.city;
							// console.log(that.address);
						}
					})
				}
			});
			//首页轮播图
			uni.request({
				url: "https://www.codeman.ink/api/banner",
				method: 'GET',
				success: (res) => {
					// console.log(res.data);
					res.data.banners.forEach((value, index) => {
						let photo = {};
						photo.image = value.imageUrl;
						this.list.push(photo);
					})
				}
			})
			//热门歌单
			uni.request({
				url: "https://www.codeman.ink/api/top/playlist",
				method: 'GET',
				data: {
					limit: 3
				},
				success: (res) => {
					// console.log(res.data);
					res.data.playlists.forEach((value, index) => {
						let singer = {};
						singer.id = value.id;
						singer.name = value.name;
						singer.image = value.coverImgUrl;

						if (value.playCount > 10000) {
							if (parseInt((value.playCount) / 10000) > 10000) {
								singer.playCount = parseInt((value.playCount) / 10000 / 10000) +
									'亿'; //听歌数量
							} else {
								singer.playCount = parseInt((value.playCount) / 10000) + '万'; //听歌数量
							}

						} else {
							singer.playCount = value.playCount;
						}
						this.playlist.push(singer);
					})
				}
			});
			//最新音乐
			uni.request({
				url: "https://www.codeman.ink/api/top/song",
				data: {
					type: 0
				},
				method: 'GET',
				success: (res) => {

					res.data.data.forEach((value, index) => {
						if (index < 10) {
							let songs = {};
							songs.id = value.id;
							songs.alias = value.alias;
							songs.singer = [];
							value.artists.forEach((item, num) => {
								songs.singer.push(item.name);
							});
							songs.name = value.name;
							songs.image = value.album.picUrl;
							this.new_song.push(songs);
						}
					})

					// console.log(this.new_song);
				}

			})

		},
		onReady() {
			this.$refs.uTips.show({
				title: `欢迎你,${this.vuex_user.nickname}`,
				type: 'success'
			});
		},
		methods: {
			show_music(iss){
				this.musicId = iss;
			},
			confirm(e){
				if(e[0].value == 2){
					this.jump('/pages/user/latest_mv')
				}else if(e[0].value == 1){
					this.jump('/pages/user/recommend')
				}
				// console.log(e[0].value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shuffl {
		width: 90%;
		margin: 10rpx auto;
		border-radius: 30rpx;
	}

	.bold {
		font-size: 40rpx;
		font-weight: bold;
	}

	.search {
		border-radius: 50rpx;
	}

	.personal {
		padding: 20rpx 0;
		text-indent: 20rpx;
		border: 1rpx solid #858689;
		line-height: 60rpx;
		border-radius: 20rpx;
	}

	.top {
		font-weight: bold;
		font-size: 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.grid {
		font-size: 50rpx;
		font-weight: bold;
	}

	.tages {
		position: relative;
		top: 80rpx;
		left: 60rpx;
		right: 0;
		padding: 0 20rpx 20rpx 20rpx;
		z-index: 99;
	}
	// 	.icon {
	// 		border-radius: 100%;
	// 		font-size: 24rpx;
	// 		padding: 5rpx 10rpx;
	// 		text-align: center;
	// 	}
	// 	.helpBuy{
	// 		padding: 40rpx;
	// 	}
	// 	.select-car{
	// 		white-space: nowrap;
	// 		.car{
	// 			display: inline-block;
	// 			border-radius: 10rpx;
	// 			margin: 20rpx;
	// 			.left{
	// 				float: left;
	// 			}
	// 			.right{
	// 				float: right;
	// 			}
	// 			.left,.right{
	// 				flex-direction: column;
	// 				image{
	// 					width: 80rpx;
	// 				}
	// 			}
	// 		}
	// 		.sel-car{
	// 			border: 1rpx solid red;
	// 		}
	// 	}
	// 	.tabbar {
	// 		flex-direction: column;
	// 		.tabItem-icon {
	// 			width: 60rpx;
	// 			height: 60rpx;
	// 		}

	// 	z-index: 99;
	// }

	.item {
		display: flex;
		padding: 20rpx;
		border: 1rpx solid #c8c8c8;
	}

	.img {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #000000;
		margin-top: 20rpx;
	}

	.title_add {
		padding-left: 20rpx;
		font-size: 24rpx;
	}

	.text_is_beyond {
		// max-height: 130upx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.long_btn {
		margin-top: 100rpx;
	}

	.play {
		width: 100%;
		bottom: 0upx;
		padding: 20upx;
		position: fixed;
		background: #FFFFFF;
		transform: translateZ(0);
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx -5rpx 14rpx #e3e6e6;
		bottom: constant(safe-area-inset-bottom);
		
	}
</style>
